<template>
  <div class="my-supplier">
    <menu-content-layout title="我的供应商">
      <template v-slot:icon>
        <img src="~/assets/images/my-supplier1.png" alt="" />
      </template>
      <template v-slot:content>
        <div v-if="$route.name === 'MySupplier'" class="content-list">
          <div class="prompt">
            您在入驻找包装网的{{ day || 0 }}天内，一共在
            <span class="keyword">{{ list.length || 0 }}</span>家供应商采购过。
          </div>
          <div class="list">
            <div class="item" v-for="(item, index) in list" :key="index">
              <div class="index">{{ item.rank }}</div>
              <img :src="item.mer_avatar" alt="" class="pic" />
              <div class="texts" @click="pushToDetails(item.mer_id)">
                <p class="name">{{ item.mer_name }}有限公司</p>
                <p class="quantity">共采购：{{ item.total_price || 0 }}元</p>
              </div>
            </div>
          </div>
          <m-pagination :pagination="list.length" />
        </div>
        <router-view v-else/>
      </template>
    </menu-content-layout>
  </div>
</template>

<script>
import MenuContentLayout from "@/components/common/menu-content-layout/MenuContentLayout";
import MPagination from "@/components/common/m-pagination/MPagination";
import { getMerList } from "@/request/api";

export default {
  name: "MySupplier",
  components: { MPagination, MenuContentLayout },
  data() {
    return {
      list: [],
      day: ''
    };
  },
  created() {
    this.getList();
  },
  methods: {
    pushToDetails(id) {
      this.$router.push({
        name: "SupplierDetails",
        query: { id }
      });
    },
    // 获取Top商铺排行
    async getList() {
      const res = await getMerList();
      try{
        this.list = res.data.list;
        this.day = res.data.day;
      }catch(err) {
        this.$message.error(err.message);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.my-supplier {
  .prompt {
    height: 98px;
    background-color: rgb(243, 244, 247);
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px; 
    .keyword {
      color: $theme-color-1;
      font-size: 32px;
      font-weight: bold;
      margin: 0 10px;
    }
  }

  .list {
    margin-bottom: 40px;

    .item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      font-size: 16px;

      &:nth-of-type(1) {
        .index {
          background-image: url("~@/assets/images/index-1.png");
        }
      }

      &:nth-of-type(2) {
        .index {
          background-image: url("~@/assets/images/index-2.png");
        }
      }

      &:nth-of-type(3) {
        .index {
          background-image: url("~@/assets/images/index-3.png");
        }
      }

      &:nth-of-type(1),
      &:nth-of-type(2),
      &:nth-of-type(3) {
        .index {
          color: #fff;
        }
      }

      .index,
      .pic,
      .texts {
        margin-right: 35px;
      }

      .index {
        width: 50px;
        height: 92px;
        font-size: 22px;
        text-align: center;
        line-height: 92px;
        background-repeat: no-repeat;
        background-position: center center;
      }

      .pic {
        width: 170px;
        height: 92px;
      }

      .texts {
        padding: 10px 0;
        cursor: pointer;

        .name {
          margin-bottom: 15px;
        }
      }
    }
  }
}
</style>
